<template>
  <view>
    <!-- <button open-type="getUserInfo" @getuserinfo="getUserProfile" class="btn_appointment arc_button"
		type="default">使用微信授权登录</button> -->

    <view class="top-wrap">
      <view class="header" :style="{ 'padding-top': marTop + 'px' }">
        <text class="headerTitle">服务</text>
      </view>
      <view class="cardLeft">
        <image
          class="top-img"
          src="../../static/images/icon_h_wen@2x.png"
          mode=""
        ></image>
        <view class="top-font">
          <text style="font-size: 40rpx; font-weight: bold;">
            {{ statisticsInfo.consultationsNumber || 0 }}
          </text>
          <view><text class="card-font">咨询记录</text></view>
          <!-- 问诊服务 -->
        </view>
      </view> 
      <view class="cardRight">
        <image
          class="top-img"
          src="../../static/images/icon_h_kai@2x.png"
          mode=""
        ></image>
        <view class="top-font">
          <text style="font-size: 40rpx; font-weight: bold;">
            {{ statisticsInfo.squaresNumber || 0 }}
          </text>
          <view><text class="card-font">用药历史</text></view>
          <!-- 开方服务 -->
        </view>
      </view>
      <!-- </view> -->
    </view>
    <view v-if="listData.length > 0">
      <view class="content_line" v-for="(data, index) in listData" :key="index">
        <view class="" @click="gotoChat(data)">
          <view class="card-top">
            <view style="display: flex; width:62%">
              <view class="icon_line_green"></view>
              <view style="font-size: 30rpx;"><text >{{data.storeName != null ? data.storeName : '' }}</text></view>
            </view>
            <view style="font-size: 29rpx;">
              <text>{{ data.patientName || '' }}</text>
              <text style="padding: 0 10rpx;">|</text>
              <text>{{ data.sex == 1 ? '男' : data.sex == 2 ? '女': '' }}</text>
              <text style="padding: 0 10rpx;">|</text>
              <text>{{ data.age || 0 }}岁</text>
            </view>
          </view>
          <view class="card-content" style="display: flex; margin-top: 10rpx;">
            <uni-badge
              class="uni-badge-left-margin"
              :text="data.noReadCount"
              absolute="rightTop"
              size="small"
              type="error"
            >
              <view class="img_header">
                <image :src="data.avatar"></image>
              </view>
            </uni-badge>

            <!-- <text class="noReadTxt" v-if="data.noReadCount>0">{{ data.noReadCount}}</text> -->
            <view class="" style="width: 80%;">
              <text class="pad30 fontstyle">
                {{ data.loginType == '5' ? '服务人员：' : '医生：'
                }}{{ data.doctorName || '' }}
              </text>
              <view class="gray_font lable-info" style="margin-top: 10rpx;width:60%">
                <view
                  v-if="data.type == 1 || data.type == 8"
                  class="pad30 info"
                >
                  {{ data.loginType == '5' ? '服务人员：' : '医生：'
                  }}{{ data.content.name }}已开具了处方，等待支付
                </view>
                <view v-if="data.type == 2" class="pad30 info">
                  {{ data.content.illnessConetxt }}
                </view>
                <view v-if="data.type == 3" class="pad30 info">[图片]</view>
                <view v-if="data.type == 4" class="pad30 info">[语音]</view>
                <view v-if="data.type == 5" class="pad30 info">
                  {{ data.content }}
                </view>
                <view v-if="data.type == 6" class="pad30 info">
                  {{ data.content }}
                </view>
                <view v-if="data.type == 7" class="pad30 info">
                  {{ data.content.title }}
                </view>
                <text v-if="data.type == 9" class="pad30 info color">
                  问诊已结束
                </text>
              </view>
            </view>
          </view>

          <view style="float: right; margin-top: -66rpx;">
            <text class="time gray_font">{{ data.time || '' }}</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 滑动提示信息 -->
    <uni-load-more
      :status="statusLoad"
      style="height: 200rpx; margin-top: 20rpx;"
      :content-text="contentText"
      v-if="showLoadMore"
    />
    <view class="noInfo_Img" v-else-if="listData.length <= 0">
      <image src="../../static/images/icon_lack_message@2x.png"></image>
       <view v-if="!isLogin" class="toLogin" @click="toLogin">
          <text class="">
              想查看更多数据，请先
              <text class="greenFont" >登录</text>
          </text>
      </view>
    </view>
  </view>
</template>

<script>
import { statistics, chatList } from '@/api/service.js'
import store from '@/store'
export default {
  data() {
    return {
      marTop: 0,
      showLoadMore: false,
      statusLoad: 'more',
      contentText: {
        contentdown: '查看更多',
        contentrefresh: '加载中...',
        contentnomore: '没有更多',
      },
      total: 0, //总条数
      nowCount: 0, //当前累计显示条数
      listData: [
        // {
        //     sessionId: 0, // 会话id
        //     avatar: '', //医生头像
        //     doctorName: '刘医生', // 医生姓名
        //     patientId: 0, // 就诊人id
        //     patientName: '病人1', // 就诊人姓名
        //     sex: 1, //医生性别(1男2女)
        //     age: 12, // 年龄
        //     content: '你没病', // 最新消息内容
        //     time: '2021-11-01', //消息时间
        //     noReadCount: 12, //未读消息数量
        //     type: 5, //消息类型(1,现场开方消息 2.图文咨询消息 3,图片 4.语音 5.普通消息 6 提醒消息 7.用药咨询)
        //     doctorId: 1 // 医生id
        // },
        // {
        //     sessionId: 2, // 会话id
        //     avatar: '', //医生头像
        //     doctorName: '刘医生1', // 医生姓名
        //     patientId: 1, // 就诊人id
        //     patientName: '病人2', // 就诊人姓名
        //     sex: 1, //医生性别(1男2女)
        //     age: 22, // 年龄
        //     content: '你没病1ssfs ', // 最新消息内容
        //     time: '2021-11-01', //消息时间
        //     noReadCount: 1, //未读消息数量
        //     type: 5, //消息类型(1,现场开方消息 2.图文咨询消息 3,图片 4.语音 5.普通消息 6 提醒消息 7.用药咨询)
        //     doctorId: 2 // 医生id
        // }
      ], //列表数据
      statisticsInfo: {}, //统计数据
      // 查询参数
      queryParams: {
        pageNum: 1, //第几页
        pageSize: 10, //每页显示条数
      },
      isLogin:false,//是否登录

    }
  },
  onShow() {
    this.isLogin = this.$store.getters.isLogin;
    if (this.$store.getters.isLogin) {
      this.nowCount = 0
      this.total = 0
      this.queryParams.pageNum = 1
      this.listData = []
      // setTimeout(()=>{
      this.getStatistics()
      this.getChatList()
      // },1000)

      this.showLoadMore = false
    }
    const res = wx.getMenuButtonBoundingClientRect()
    this.marTop = res.top + 5
  },
  onPullDownRefresh() {
    if (this.$store.getters.isLogin) {
      this.nowCount = 0
      this.total = 0
      this.queryParams.pageNum = 1
      this.listData = []
      // setTimeout(()=>{
      this.getStatistics()
      this.getChatList()
      // },1000)

      this.showLoadMore = false
    }
    const res = wx.getMenuButtonBoundingClientRect()
    this.marTop = res.top + 5
    setTimeout(function () {
      uni.stopPullDownRefresh()
    }, 1000)
  },
  //滑动到底部触发
  onReachBottom() {
    if (this.nowCount > 0 && this.nowCount >= this.total) {
      this.statusLoad = 'noMore'
    } else {
      this.showLoadMore = true
      this.statusLoad = 'loading'
      this.getChatList()
    }
  },
  methods: {
     toLogin() {
          uni.navigateTo({
              url: '/pagesSub/index/index'
          })
      },
    // 获取统计数据
    getStatistics() {
      statistics()
        .then((res) => {
          this.statisticsInfo = res.data
        })
        .catch((err) => {
          console.log(err, 'err统计')
        })
    },
    // 咨询列表
    getChatList() {
      let _this = this
      let newData = []
      let listData = _this.listData
      let nowCount = _this.nowCount
      let pageNum = _this.queryParams.pageNum
      // if (obj) {
      // 	_this.newData = [];
      // 	_this.queryParams.pageNum = obj.pageNum;
      // 	pageNum = _this.queryParams.pageNum;
      // }
      chatList(_this.queryParams)
        .then((res) => {
          this.showLoadMore = false
          if (pageNum != 1) {
            newData = listData.concat(res.rows)
          } else {
            newData = res.rows
          }
          newData.map((item) => {
            if (
              item.type == 2 ||
              item.type == 7 ||
              item.type == 1 ||
              item.type == 8
            ) {
              if (item.content) {
                item.content = JSON.parse(item.content)
                return item
              }
              return item
            }
          })
          _this.$set(_this, 'listData', newData) //使用$set可以避免this直接赋值，在组件上【有时】不及时生效的问题（偶尔会出现）
          //设置分页
          _this.total = res.total
          _this.queryParams.pageNum = pageNum + 1
          _this.nowCount = nowCount + res.rows.length
        })
        .catch((err) => {
          console.log(err, 'err会话列表')
        })
    },
    gotoChat(data) {
      let info = encodeURIComponent(JSON.stringify(data))
      // console.log(data, info, 'data000')
      if (data.loginType == '5') {
        // 服务人员
        uni.navigateTo({
          url: `/pagesSub/service/serviceToChat?item=${info}`,
        })
      } else if (data.loginType == '1') {
        uni.navigateTo({
          url: `/pagesSub/service/chat?item=${info}`,
        })
      }
    },
  },
}
</script>

<style>


.toLogin {
    font-size: 26rpx;
    line-height: 58rpx;
    /* text-align: center; */
    margin-left: 40rpx;
}

.greenFont {
    color: #4ccdbc;
}

page {
  background-color: #f8f8f8;
}

.top-wrap {
  display: flex;
  background-image: url(../../static/images/bg_h_doc@2x.png);
  height: 360rpx;
  background-repeat: no-repeat;
  background-size: 100%;
  color: #ffffff;
}

.cardLeft,
.cardRight {
  margin: 200rpx 20rpx 0;
  flex-direction: row;
  background-color: #ffffff;
  border-radius: 10rpx;
  padding: 30rpx;
  width: 356rpx;
  display: inline;
  text-align: center;
  height: 100rpx;
}

.top-img {
  width: 100rpx;
  height: 100rpx;
  float: left;
}

.top-font {
  color: #000000;
  font-weight: 800;
}

.card-font {
  font-size: 31rpx;
  color: #7d7d7d;
  font-weight: 400;
}

.content_line {
  position: relative;
  background-color: #ffffff;
  padding: 15rpx 30rpx;
  margin: 20rpx;
  border-radius: 10rpx;
}
.card-top {
  padding: 10rpx 0;
  border-bottom: 1rpx solid #fafafa;
  font-size: 31rpx;
  display: flex;
  justify-content: space-between;
}

.img_header {
  width: 80rpx;
  height: 80rpx;
  border-radius: 100%;
}

.img_header image {
  width: 100%;
  height: 100%;
  border-radius: 100%;
}

.noReadTxt {
  display: block;
  width: 33rpx;
  height: 22rpx;
  line-height: 22rpx;
  border-radius: 13rpx;
  background-color: red;
  color: #ffffff;
  text-align: center;
  position: relative;
  top: -96rpx;
  left: 56rpx;
  font-size: 16rpx;
}

.fontstyle {
  font-size: 30rpx;
}

.time {
  font-size: 26rpx;
}

.info {
  font-size: 28rpx;
  width: 95%;
}

/* 暂无数据图片 */
.noInfo_Img {
  width: 500rpx;
  height: 400rpx;
  position: absolute;
  left: 50%;
  top: 37%;
}

.lable-info {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 1;
  /* //文字上限行 */
  -webkit-box-orient: vertical;
}

/deep/.uni-load-more[data-v-90d4256a] {
  align-items: baseline;
}
.header {
  position: absolute;
  z-index: 999;
  width: 100%;
  text-align: center;
}
.header > .headerTitle {
  color: #ffffff;
  font-size: 37rpx;
}
.icon_line_green {
  height: 30rpx;
  padding: 4rpx;
  border-top-right-radius: 40rpx;
  border-bottom-right-radius: 40rpx;
  background-color: #4dcbbd;
  position: absolute;
  left: 0;
}
</style>
